<template>
  <div class=" container" >
        <div class="my_table">
            <el-table :data="List1.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
            style="{width: '100%',background-color:'#10254a'}" :header-cell-style= "{color: '#edef5c',height: '40px',background:'#10254a'}" 
            row-class-name="rows"
            :cell-style="columncolorStyle">
                <el-table-column
                    fixed
                    prop="type"
                    label="报警类型"
                    width="180"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="date"
                    label="报警时间"
                    width="180"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="img"
                    label="图片URL"
                    width="180"
                    align="center"
                    :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-popover
                            placement="right"
                            title=""
                            trigger="click">
                            <el-image slot="reference" 
                            :src="ip+scope.row.imgPath"
                            :alt="scope.row.name"
                            style="max-height: 200px;max-width: 200px">
                            </el-image>
                            <el-image :src="scope.row.imgPath"></el-image>
                    </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="number"
                    label="摄像头编号"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="摄像头名称"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="confidence"
                    label="置信度"
                    align="center">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                    <template slot-scope="scope">
                        <el-button
                        @click.native.prevent="handleDelete(scope.$index)"
                        type="text"
                        size="small">
                        <div class="change_icon"><i class="el-icon-circle-close"></i></div>
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="row">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="List1.length">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getFirealarmList,deleteFireId } from '@/api/fire'
export default {
    name:'Firectrl',
    data() {
        return {
            ip:'http://localhost:9090',
            List1:[],
            currentPage: 1, //  el-pagination 初始页
            pagesize: 10, //  el-pagination 每页的数据
        }
    },
    created() { 
        this.getUserList1()    
    },
    methods:{
        async handleDelete(index) {
            console.log('@@@@@index')
            console.log(index)
            // console.log("qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq"+row)
            console.log('@@@@@id')
            console.log(this.List1[index].id)
            console.log(this.List1.length)
            // for(var i=this.List1.length; i>0; i--){
                // await this.$http.delete("http://localhost:9090/fireAlarm/" + this.List1[index].id)
                await deleteFireId(this.List1[index].id)
                .then(res => {
                    console.log(res)
                    if(res.data&&res.data.code==200){
                            // 不发请求更新页面
                        this.List1.splice(index,1)
                        this.$message.success("删除成功")
                    return;
                    }
                }).catch(error =>{
                    this.$message.error(error)
                }) 
            // }
            // var index=this.List1[index].id
            // console.log(index)
        //     await this.$http.delete("http://localhost:9090/fireAlarm/" + this.List1[index].id)
        //     .then(res => {
        //     console.log(res)
        //     if(res.data.code===200){
        //         // 不发请求更新页面
        //     this.List1.splice(index,1)
        //     this.$message.success("删除成功")
        //     }
        // }).catch(error =>{
        //     this.$message.error('错误')
        // })       
        },
        getUserList1() {
            //使用axios发送ajax请求
            //axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
            // this.$http.get("http://localhost:9090/fireAlarm/getAll")
                getFirealarmList()
                .then(response =>{//请求成功执行then方法
                    if(response.data.code==200){
                        this.List1 = response.data.data
                    console.log(this.List1) 
                    }
                    else this.$message.success(response.data.data) 
                     
                }) 
                .catch(error =>{
                }) //请求失败执行catch方法
        },
        handleSizeChange: function(size) {
            this.pagesize = size
            console.log(this.pagesize) // 每页下拉显示数据
        },
        handleCurrentChange: function(currentPage) {
        this.currentPage = currentPage
        console.log(this.currentPage) // 点击第几页
        },
        columncolorStyle({row,column,rowIndex,columnIndex}){
            if(row){
                return 'background:#10254a'
            }
            //  if(columnIndex==0){        
            //     return 'color:#ad6066'
            // }
        },
        timer1() {
            return setTimeout(()=>{
                this.getUserList1()  
            },10000)
        },
        },
    watch: {
        List1() {
            this.timer1()  
        },
    },
    destroyed() {
        clearTimeout(this.timer)
    }
}
</script>

<style scoped>
 @media screen and (min-width:1280px) {
    .container{
        position: relative;
        width:1280px;
    }
}
body{
    background-color:#132c57;
}
/* .container{
    background-color: #10254a;
} */

.my_table >>> .el-table__row>td{
  /* 去除表格线 */
  border: none;
}
.row{
    height:120px;
    color:#fff;
}
/* .el-pagination{
    position: absolute;
    right:0;
} */
.change_icon{
    font-size: 20px;
}
</style>